import { Col, Form, FormItem, Row, Spin } from 'ant-design-vue'
import { computed } from 'vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { marketingApi } from '@/apis'
import type { GetGroupItemDetailRes } from '@/apis/marketingTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT } from '@/constants'
import { formatDate } from '@/utils'

import { activityStatusMap, groupStatusMap, orderStatusMap } from '../constants'
import styles from './index.module.css'

export default defineComponent({
  name: 'GroupDetail',
  setup() {
    const loading = ref(false)
    const pageData = ref({} as GetGroupItemDetailRes)
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '用户头像',
            field: 'avatar',
            slots: {
              default: 'avatar'
            }
          },
          {
            title: '用户昵称',
            field: 'nickname'
          },
          {
            title: '手机号',
            field: 'mobile'
          },
          {
            title: '参团时间',
            field: 'joinTime',
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '订单号',
            field: 'orderSn'
          },
          {
            title: '订单状态',
            field: 'orderStatus',
            formatter: ({ cellValue }) => {
              return orderStatusMap[cellValue]
            }
          }
        ]
      }
    } as ProTableProps)

    const route = useRoute()

    const id = computed(() => Number(route.query.id))

    /** 初始化 */
    async function init() {
      try {
        loading.value = true
        pageData.value = await marketingApi.getGroupItemDetail(id.value)
        tableConfig.value.options!.data =
          pageData.value.groupParticipationVoList
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      init()
    })

    return {
      loading,
      pageData,
      tableRef,
      tableConfig
    }
  },
  render() {
    return (
      <div class={styles.view}>
        <Spin spinning={this.loading}>
          <Form class={styles.form} layout="inline">
            <Row class={styles.formRow}>
              <Col class={styles.formCol} span={24}>
                <FormItem label="活动名称">
                  <span>{this.pageData.activityName}</span>
                </FormItem>
                <FormItem label="团队编号">
                  <span>{this.pageData.groupNo}</span>
                </FormItem>
              </Col>
            </Row>
            <Row class={styles.formRow}>
              <Col class={styles.formCol} span={24}>
                <FormItem label="活动状态">
                  <span>{activityStatusMap[this.pageData.activityStatus]}</span>
                </FormItem>
                <FormItem label="拼团状态">
                  <span>{groupStatusMap[this.pageData.groupStatus]}</span>
                </FormItem>
              </Col>
            </Row>
            <Row class={styles.formRow}>
              <Col class={styles.formCol} span={24}>
                <FormItem label="成团数">
                  <span>{this.pageData.groupNumber}人</span>
                </FormItem>
                <FormItem label="开团用户">
                  <span>{this.pageData.sponsorName}</span>
                </FormItem>
              </Col>
            </Row>
            <Row class={styles.formRow}>
              <Col class={styles.formCol} span={24}>
                <FormItem label="参与人数">
                  <span>{this.pageData.participation}人</span>
                </FormItem>
                <FormItem label="开团时间">
                  <span>{formatDate(this.pageData.startTime)}</span>
                </FormItem>
              </Col>
            </Row>
            <Row class={styles.formRow}>
              <Col class={styles.formCol} span={24}>
                <FormItem label="折扣商品">
                  <span>{this.pageData.couponName}</span>
                </FormItem>
                <FormItem label="完成时间">
                  <span>{formatDate(this.pageData.finishedTime)}</span>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <ProTable
            ref="tableRef"
            v-slots={{
              avatar: ({ row }) => (
                <img class={styles.avatar} src={row.avatar} />
              )
            }}
            {...this.tableConfig}
          />
        </Spin>
      </div>
    )
  }
})
